<style scoped>
  .address-line-height {
    line-height: 32px;
  }
</style>
<template>
  <div>
    <el-dialog :visible.sync="innerVisible"
      ref="modalFrame"
      width="800px"
      :title="deliveryAddressLenght ? '选择提货地址' : '温馨提示'"
      center
    >
      <el-row v-if="deliveryAddressLenght">
        <el-radio-group v-model="checkedAddress">
          <el-col :span="22" :offset="2" v-for="(item, index) in deliveryAddress" :key="index">
            <el-radio :label="item">
              <span class="address-line-height">
                {{item.deliveryName}} ({{item.deliveryPhone}}) {{item.deliveryProvince}} {{item.deliveryCity}} {{item.deliveryDistrict}} {{item.deliveryAddress}}
                <span style="color: darkred" v-if="item.isDefault == '1'">(默认地址)</span>
              </span>
            </el-radio>
          </el-col>
        </el-radio-group>
      </el-row>
      <el-row v-if="!deliveryAddressLenght">
        <el-col :span="24" style="text-align: center;">
          <p style="margin: 10px 0px">你还未添加提货信息，可在【我的账户】</p>
          <p style="margin: 10px 0px">添加常用提货信息，方便录单时候选择</p>
        </el-col>
      </el-row>
      <span slot="footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {httpGetDetail} from 'assets/scripts/base/util'
export default {
  name: 'choiceAddress',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deliveryAddress: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      innerVisible: false,
      checkedAddress: {},
      defaultAddress: {}
    }
  },
  created() {
  },
  computed: {
    deliveryAddressLenght() {
      return !!this.deliveryAddress.length
    }
  },
  watch: {
    visible(val, oldVal) {
      console.log('visible', val, oldVal)
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      console.log('innerVisible', val)
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    },
    deliveryAddress(val, oldValue) {
      val.forEach(item => {
        if (item.isDefault === 1) {
          this.checkedAddress = item
          this.defaultAddress = item
        }
      })
    }
  },
  methods: {
    sure() {
      this.$emit('handleDeliveryAddress', this.checkedAddress)
      this.innerVisible = false
    }
  }
}
</script>
